<script setup lang="ts">
import dbnorm from '@/db/bignorm'
import dbsterility from '@/db/appendix/sterility'
import dbivd from '@/db/appendix/ivd'
import dbdenture from '@/db/appendix/denture'
import dbsoftware from '@/db/appendix/software'
import dbimplan from '@/db/appendix/implan'

const data: { [k: string]: any } = {
    bignorm: dbnorm,
    sterility: dbsterility,
    ivd: dbivd,
    denture: dbdenture,
    software: dbsoftware,
    implan: dbimplan,
}

const props = defineProps({
    type: {
        type: String, default: 'bignorm'
    },
    idx: {
        type: Array<number>, default: [0, 0]
    },
    show: {
        type: Boolean, default: false
    }
})

const emits = defineEmits(['update:show'])
</script>

<template>
    <div class="mask" v-if="show" @click.stop="emits('update:show', false)" @touchstart.stop="emits('update:show', false)">
        <div class="block" @click.stop="void">
            <div class="title">{{ data[props.type].title }}</div>
            <div class="c-title">{{ data[props.type].chapters[props.idx[0]].title }}</div>
            <div class="item">
                <div>
                    <span class="i-title">{{ data[props.type].chapters[props.idx[0]].items[props.idx[1]].title }}</span>
                    <span>{{ data[props.type].chapters[props.idx[0]].items[props.idx[1]].str }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.title {
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    // margin: 10px 0;
    white-space: pre-wrap;
}

.c-title {
    position: sticky;
    top: 0;
    background-color: white;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    padding: 5px 0;
}

.item {
    margin: 10px 0;
    white-space: pre-wrap;

    .i-title {
        margin: 0 1em 0 0em;
        // margin: 0 1em 0 2em;
        font-weight: bold;
    }

    .star {
        color: red;
        font-weight: bold;

    }

    .guide {
        font-weight: bold;
    }

    .source {
        text-align: right;
        font-size: 0.9em;
        color: gray;
    }
}

.mask {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 9999;

    .block {
        max-width: 800px;
        min-width: 360px;
        background-color: white;
        border-radius: 10px;
        padding: 1em;
    }
}
</style>